<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>确认订单</title>
	<link rel="stylesheet" href="css/orderaddress.css" />
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/mui.min.css">

	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
</head>
<body class="body">
<div class="container-fluid header">
	<div class="row">
		<div class="col-xs-12" style="border-bottom: 2px solid #DBDBDB;padding: 0px;">
			<div class="col-xs-1" style="padding: 0px;">
				<p class="tu1"><a href="javascript:history.go(-1)"><img src="img/尖括号.png" height="22px"/></a></p>
			</div>
			<div class="col-xs-1" style="padding: 0px;">
				<p class="tu2"><a href=""><img src="img/关闭.png" height="22px"></a></p>
			</div>
			<div class="col-xs-10" style="padding: 0px;">
				<p class="house">确认订单</p>
			</div>

		</div>
	</div>
</div>

<div class="shangmina">
	<form action="insertAdd?id=${shopb.id}" method="post" class="addressForm">
		<div class="message">
			<div class="col-xs-12" style="">
				<div class="col-xs-3" style="">
					<p class="">收货人</p>
				</div>
				<div class="col-xs-9" style="">
					<p class=" "><input type="text" class="addressPeople" placeholder="收货人姓名" name="addressPeople"/></p>
				</div>
			</div>
			<div class="col-xs-12" style="">
				<div class="col-xs-3" style="">
					<p class="">手机号码</p>
				</div>
				<div class="col-xs-9" style="">
					<p class=" "><input type="text" class="addressPhone" placeholder="收货人手机号" name="addressPhone"/></p>
				</div>
			</div>
			<div class="col-xs-12" style="">
				<div class="col-xs-3" style="">
					<p class="">所在地区</p>
				</div>
				<div class="col-xs-9" style="">
					<p class=" ">
						<input type="text" class="address" placeholder="所在省/市/区"/>
						<span id='cityResult3' class="ui-alert" style="display: none;"></span>
						<a href="" id='showCityPicker3'  type='button' class="jian">></a>
					</p>
				</div>
			</div>
			<div class="col-xs-12" style="">
				<div class="col-xs-3" style="">
					<p class="">收货地址</p>
				</div>
				<div class="col-xs-9" style="">
					<p class=" "><input type="text" class="address1" placeholder="请填写收货地址"/>
						<a href="" class="dingwei"><img src="img/位置.png" width="15px"/>定位</a></p>
				</div>
			</div>
			<div class="col-xs-12" style="">
				<div class="col-xs-3" style="">
					<p class="">门牌号</p>
				</div>
				<div class="col-xs-9" style="">
					<p class=" "><input type="text" class="address2" placeholder="街道、门牌号等"/></p>
				</div>
			</div>
		</div>
		<div>
			<div class="mui-content" style="width: 100%;margin: 0px auto;background-color:white ;border:1px solid #DEDEDF;border-radius: 10px;overflow: hidden;">
				<ul class="mui-table-view" style="margin-top: 0px;">

					<li class="mui-table-view-cell" style="">
						<span></span>
						<div class="mui-switch mui-switch-blue mui-switch-mini">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<button class="button">保存并使用</button>

		<input type="hidden" id="address" name="address"/>
		<input type="hidden" value="${shopb.id}"/>
	</form>
</div>
<script src="js/mui.min.js"></script>
<!--<script src="../js/mui.picker.min.js"></script>-->
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
	(function($, doc) {
		$.init();
		$.ready(function() {
			/**
			 * 获取对象属性的值
			 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
			 * @param {Object} obj 对象
			 * @param {String} param 属性名
			 */
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
			//					//级联示例
			var cityPicker3 = new $.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			var showCityPickerButton = doc.getElementById('showCityPicker3');
			var cityResult3 = doc.getElementById('cityResult3');
			showCityPickerButton.addEventListener('tap', function(event) {
				cityPicker3.show(function(items) {
					cityResult3.innerHTML =  _getParam(items[0], 'text')  + _getParam(items[1], 'text')  + _getParam(items[2], 'text');
					//返回 false 可以阻止选择框的关闭
					//return false;
					a();
				});
			}, false);
		});
	})(mui, document);
</script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script src="js/mui.min.js"></script>
<script>
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	mui('.mui-content .mui-switch').each(function() { //循环所有toggle
		//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
		this.parentNode.querySelector('span').innerText = '设为默认收货地址' + (this.classList.contains('mui-active') ? ' ' : ' ');
		/**
		 * toggle 事件监听
		 */
		this.addEventListener('toggle', function(event) {
			//event.detail.isActive 可直接获取当前状态
			this.parentNode.querySelector('span').innerText = '设为默认收货地址' + (event.detail.isActive ? ' ' : ' ');
		});
	});

	$('input').on('input propertychange',function(){
		if($.trim($('.addressPeople').val())!==""&&$.trim($('.addressPhone').val())!==""&&$.trim($('.address').val())!==""&&$.trim($('.address1').val())!==""&&$.trim($('.address2').val())!==""){
			$('.button').css({'background-color':'#FE4543','color':'ffffff'});
		}else{
			$('.button').css({'background-color':'#F1CED2','color':'ffffff'});
		}
	});

	function a(){
		if($(".ui-alert").text()!=""||$(".ui-alert").text()!=null){
			$(".address").val($(".ui-alert").text());
		}

	}



	$(function(){
		$(".addressForm").submit(function(){
			var address = $(".address").val();
			var address1 = $(".address1").val();
			var address2 = $(".address2").val();
			var address3 = address+","+address1+address2;
			$("#address").val(address3);
		})
	})
</script>
</body>
</html>
